<template>
  <div class="price-form">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      size="mini"
      label-width="130px"
    >
      <el-row>
        <el-col :span="8" class="right-margin">
          <el-form-item label="公司名称:" prop="name">
            <el-select v-model="ruleForm.name" placeholder="请选择">
              <el-option
                label="北京天气真好科技有限公司"
                value="shanghai"
              ></el-option>
              <el-option
                label="北京天气真好科技北京分公司"
                value="beijing"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交货地:" prop="position">
            <el-select v-model="ruleForm.position" placeholder="请选择">
              <el-option label="国内" value="shanghai"></el-option>
              <el-option label="国外" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" class="right-margin">
          <el-form-item label="币种:" prop="currency">
            <el-select v-model="ruleForm.currency" placeholder="请选择">
              <el-option label="人民币" value="shanghai"></el-option>
              <el-option label="美元" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票类型:" prop="billType">
            <el-select v-model="ruleForm.billType" placeholder="请选择">
              <el-option label="增值税发票" value="shanghai"></el-option>
              <el-option label="普通发票" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" class="right-margin">
          <el-form-item label="截至时间:" prop="endDate">
            <el-date-picker
              v-model="ruleForm.endDate"
              style="width: 184px"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <span>-</span>
            <el-time-picker
              style="width: 184px"
              v-model="ruleForm.endTime"
              :picker-options="{
                selectableRange: '18:30:00 - 20:30:00',
              }"
              placeholder="任意时间点"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注:" prop="desc">
            <el-input v-model="ruleForm.desc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="询价类型:" prop="priceType">
            <el-select v-model="ruleForm.priceType" placeholder="请选择">
              <el-option label="实单询价" value="shanghai"></el-option>
              <el-option label="普通询价" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item>
        <el-button class="save-btn" @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PriceForm",
  components: {},
  data() {
    return {
      ruleForm: {
        name: "", //公司名称
        position: "", //交货地
        currency: "", //币种
        billType: "", //发票类型
        endDate: "", //截至日期
        endTime: "", //截至时间
        desc: "", //备注
        priceType: "", //询价类型
      },
      rules: {
        name: [{ required: true, message: "请填写公司信息", trigger: "blur" }],
        position: [
          { required: true, message: "请选择交货地", trigger: "change" },
        ],
        currency: [{ required: true, message: "币种", trigger: "change" }],
        billType: [
          { required: true, message: "请选择发票类型", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "请选择截至日期", trigger: "change" },
        ],
        priceType: [
          { required: true, message: "请选择询价类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}

.right-margin {
  margin-right: 150px;
}
</style>
